<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>zTree 树插件 标准数据格式</title>
    <link rel="stylesheet" th:href="@{/css/zTree/demo.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/zTree/zTreeStyle/zTreeStyle.css}" type="text/css">
    <script type="text/javascript" th:src="@{/js/zTree/jquery-1.4.4.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/zTree/jquery.ztree.core.min.js}"></script>
    <script type="text/javascript">
        var setting = {
            view: {
                //为了避免与双击功能冲突，建议关闭双击展开节点的功能
                dblClickExpand: false
            },
            callback: {
                //单击回调方法.
                onClick: onClick
            }
        };

        /**
         * zTree 单击回调方法
         * zTree 默认不提供单击节点名称展开节点的功能，但可以利用 onClick 事件回调函数轻松实现此功能
         * @param e
         * @param treeId
         * @param treeNode
         */
        function onClick(e, treeId, treeNode) {
            /**treeDemo 是 zTree 容器的 id 值，不要带 # 号*/
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.expandNode(treeNode);
        }

        $(document).ready(function () {
            $.ajax({
                "url": "http://localhost:8080/example/getStandardData",
                "dataType": "json",
                "success": function (data) {
                    var zNodes = data;
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                },
                "error": function (data) {
                    console.log(data);
                }
            });
        });
    </script>
</head>
<body>
<div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>